<template>
    <div>
        <div style="width: 1300px;">
            <vxe-table
                v-loading="loading"
                ref="xTable"
                :data="tableData"
                style="width: 100%"
                class="text-center">
                <vxe-table-column title="序号" field="id" width="100"/>
                <vxe-table-column title="平台" field="platform" width="100"/>
                <vxe-table-column title="签名名称" field="name" width="430" style="font-weight: bolder!important;"/>
                <vxe-table-column title="使用渠道" field="source" width="520">
                    <template #default="{row}">
                        <el-tag field="sources" v-for="id in row.sources" :key="id">{{ appSources[id] }}</el-tag>
                    </template>
                </vxe-table-column>
                <vxe-table-column title="操 作" width="150px">
                    <template #default="{row}">
                        <el-button
                            type="primary"
                            @click="edit(row)">
                            渠道选择
                        </el-button>
                    </template>
                </vxe-table-column>
            </vxe-table>
        </div>

        <el-dialog
            title="渠道选择"
            :visible.sync="form.show"
            width="60%"
            :append-to-body="true"
            :close-on-click-modal="false"
            center>
            <dialog-form
                :row="form.data"
                v-on:submit="onFormSubmit"
                v-on:cancel="form.show = false">
            </dialog-form>
        </el-dialog>

    </div>
</template>

<script>
import dialogForm from './form'

export default {
    name: 'index',
    components: {
        dialogForm,
    },
    data() {
        return {
            search: {
                sortField: 'id',
                sortValue: 'asc'
            },
            loading: false,
            selected: [],
            tableData: [],
            form: {
                data: {},
                show: false,
            },
            appSources: this.$store.state.appSource.allName,
        }
    },
    methods: {
        handleSearch() {
            this.loading = true;
            let filter = Object.assign({}, this.search);
            this.$store.dispatch('smsSign/Lists', filter).then(res => {
                this.tableData = res.data.data;
            }).finally(() => {
                this.loading = false;
            });
        },
        initData() {
            this.handleSearch();
        },
        edit(row) {
            this.form.data = row;
            this.form.show = true;
        },
        onFormSubmit() {
            this.form.show = false;
            this.handleSearch();
        }
    },
    created() {
        this.initData();
    }
}
</script>

<style lang="scss" scoped>
#app .el-form-item {
    margin-bottom: 0;
}
.el-tag+.el-tag {
    margin-left: 5px;
}
</style>
